﻿<div id="loading" class="centered " style="display:none">
    <div>Loading data...</div>
    <progress></progress>

</div>

<div id="body">
    <div class="page">
        <div class="page-header">
            <div class="page-header-content">
                <h1>Toasts <small>SlideNote demo</small></h1>
            </div>
        </div>
        <div class="page-region">
            <div class="page-region-content">

                <div class="grid">

                    <div class="row">

                        <div id="slidenote1" class="slidenote span9 offset2" data-role="slidenote"  @*data-source="app.dataservice.getToasts"*@ >

                            <div data-role="slidetemplate">

                                <div class="slide">
                                    <h2>{{Origin}} {{Occasion}} Toast</h2>
                                    <br />
                                    <p style=" font-size:14pt; line-height: 1.5">{{Content}} </p>
                                   
                                </div>
                            </div>

                            <div class="slides">
                            </div>

                            <span class="control left bg-color-blue">&#8249;</span>
                            <span class="control right bg-color-blue">&#8250;</span>


                        </div>
                    </div>
                    <div class="row">
                        <div class="span9 offset2">
                            <div class="span4">
                                <div>Occasion</div>
                                <div  class="input-control select">
                                    <select id="Occasion">                                       
                                        <option>Select All</option>
                                        <option>Drink</option>
                                        <option>Food</option>
                                        <option>Health</option>
                                        <option>Christmas</option>
                                        <option>New Year</option>
                                        <option>Birthday</option>
                                        <option>Wedding</option>
                                        <option>Anniversary</option>
                                        <option>Age</option>
                                    </select>
                                </div>
                            </div>
                            <div class="span3" >
                                <div>Origin</div>
                                <div class="input-control select">
                                    <select id="Origin">                                       
                                         <option>Select All</option>
                                         <option>Irish</option>
                                         <option>American</option>
                                         <option>Klingon</option>
                                         <option>French</option>
                                         <option>Italian</option>
                                         <option>British</option>
                                         <option>Polish</option>
                                         <option>Japanese</option>
                                         <option>German</option>
                                         <option>Spanish</option>
                                         <option>Greek</option>
                                         <option>Swedish</option>
                                        <option>Austrian</option>
                                    </select>
                                </div>
                            </div>
                            <div class="span1">
                                
                                 <button id="search-btn" class="button bg-color-blue fg-color-white" style="margin-top:20px; margin-left:22px"> Search</button>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="span9 offset2">
                            <a href="/Home/Submit">
                                <button class="command-button bg-color-blue fg-color-white">
                                    Submit a toast
                                <small>Share your joy!</small>
                                </button>
                            </a>
                            <a href="/Home/Edit">
                                <button class="command-button bg-color-blue fg-color-white">
                                    Edit Submited Toast
                                <small>Administartive access is given only for demo</small>
                                </button>
                            </a>

                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

@section Scripts {     
    @Scripts.Render("~/bundles/index")
 
}


 
